<template>
    <div class="view-container">
        <div class="collect_store">
            <p>今日新增收藏人数：{{addedNum}}</p>
            <p>累计收藏人数：{{totalNum}}</p>
            <Empty v-if="storeCollection.length==0">没有新消息
            </Empty>
            <div v-if="storeCollection.length!=0" v-loading="loading">
                <el-table
                        ref="multipleTable"
                        :data="storeCollection"
                        border
                        tooltip-effect="dark"
                        style="min-width: 1078px;">
                    <el-table-column prop="userName"
                                     label="用户名">
                    </el-table-column>
                    <el-table-column
                            label="下单量"
                            prop="orderQuantity">

                    </el-table-column>
                    <el-table-column
                            label="收藏时间">
                        <template slot-scope="scope">
                            {{scope.row.collectTime| parseTime}}
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center;margin-top: 24px;">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalLists">
                    </el-pagination>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import {parseTime} from '../../utils/datetime'
    import {getCollectLists, merchantCollect} from '@/api/usersList'
    import Empty from '@/components/Empty';

    export default {
        name: 'customerCollectStore',
        components: {
            'Empty': Empty
        },
        data() {
            return {
                loading:false,
                addedNum: 0,
                totalNum: 0,
                pageSize: 5,
                totalLists: 0,
                currentPage: 1,
                storeCollection: [
//                    {
//                        userName: 'aaa',
//                        dealCount: 111,
//                        collectTime: 1505287411
//                    },
//                    {
//                        userName: 'aaa',
//                        dealCount: 111,
//                        collectTime: 1505287411
//                    },
//                    {
//                        userName: 'aaa',
//                        dealCount: 111,
//                        collectTime: 1505287411
//                    }
                ]
            }
        },
        mounted() {
            this.pageSize = 5;
            this.currentPage = 1;
            this.getCollectLists()
        },
        methods: {
            handleSizeChange(val) {
//              每页条数 后台传参数直接获取渲染 当前的customerList
                this.pageSize = val;
            },
            handleCurrentChange(val) {
//              当前页数
                this.currentPage = val;
            },
            getCollectLists() {
                this.loading=true;
                let data = {
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "desc": true
                };
                getCollectLists(data)
                    .then((resp) => {
                        console.log(resp);
                        for (let item of resp.data.list) {
                            item.collectTime = parseTime(item.collectTime / 1000)
                        }
                        this.storeCollection = resp.data.list ||[];
                        this.totalLists = resp.data.total||0;
                        setTimeout(()=> {
                            this.loading=false;
                        },300);
                    }).catch((err) => {
                    console.log(err);
                    setTimeout(()=> {
                        this.loading=false;
                    },300);
                });

                merchantCollect()
                    .then((resp) => {
                        this.addedNum = resp.data.totayCollectNum;
                        this.totalNum = resp.data.totalCollectNum;
                    }).catch((err) => {
                    console.log(err);
                });

            }
        }
    }
</script>

<style lang="less" scoped>
    .collect_store{
        .el-pagination {
            margin-top: 24px;
        }
    }

</style>
